<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--1.顶部搜索框-->
    <el-row>
        <el-form :inline="true" :model="formSerach" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formSerach.username" placeholder="请输入姓名..."></el-input>
            </el-form-item>
            <el-form-item label="选择状态">
                <el-select v-model="formSerach.status" placeholder="请选择状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-refresh" @click="reset()">重置条件</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--2.提供操作的按钮组-->
    <el-row>
        <el-button type="danger" icon="el-icon-delete-solid" @click="batchDelete()" >批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus"  @click="addInfo()">新增</el-button>
    </el-row>
    <!--3.新增弹出框-->
    <el-dialog :title="info" :visible.sync="dialogFormVisible">
        <el-form :model="student">
            <el-form-item label="学生姓名" :label-width="formLabelWidth">
                <el-input v-model.trim="student.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="student.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model.number="student.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="student.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio-group v-model.number="student.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="out()">取 消</el-button>
            <el-button type="primary" @click="okDo()">确 定</el-button>
        </div>
    </el-dialog>

    <!--4.渲染数据表格-->
    <template>
        <el-table
                height="450px"
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>
            <!--操作-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--5.分页条-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper,->,total"
                :total="total">
        </el-pagination>
    </div>








</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="/javaweb17/back/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                formSerach: {
                },
                dialogFormVisible: false,
                //收集弹出框数据  定义空对象也是可以的
                student: {
                },
                formLabelWidth: '120px',
                /*列表数据*/
                tableData: [{
                    id:1,
                    username: '王小虎',
                    password: '12465',
                    age: 18,
                    phone:"13577730600",
                    status:1
                },{
                    id:2,
                    username: '王小虎',
                    password: '12465',
                    age: 18,
                    phone:"13577730600",
                    status:1
                },
                ],
                info:'',
                //当选中的时候会就将选中的对象传入的数组中 比如做批量删除
                multipleSelection: [],
                currentPage: 1,//当前页
                total:100,//总数据数
                pageSize:5,//每页默认显示几条
                ok:'',
                ids:[]//要删除的多个id

            }
        },
        methods: {
            //发送请求查询全部数据
            getAll(){
                //单纯查询全部
                /*axios.get("http://localhost:8080/javaweb17/student/findAll").then((resp) =>{
                       console.log(resp.data)
                    //将查询到的数据赋值给数据模型
                    this.tableData=resp.data;
                });
            */

                //带分页查询全部    参数携带当前页  和 每页显示几条
               // `findAllByPage?currentPage=${this.currentPage}&pageSize=${this.pageSize}`
        /*        axios.get("http://localhost:8080/javaweb17/student/findAllbyPage?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then((resp) =>{
                    console.log(resp.data.list)
                    //将查询到的数据赋值给数据模型
                    // this.tableData=resp.data;
                    this.tableData=resp.data.list;//数据
                    this.total=resp.data.count;//数据总数
                    // console.log(resp.data.count)
                });
*/

                //如果有模糊条件 带条件分页 如果没有条件直接分页（初始化）
                axios.post("http://localhost:8080/javaweb17/student/findAllbyPageIf?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formSerach).then((resp) =>{
                    console.log(resp.data.list)
                    //将查询到的数据赋值给数据模型
                    this.tableData=resp.data.list;//数据
                    this.total=resp.data.count;//数据总数
                });



            },
            /*搜索功能的方法*/
            onSubmit() {
                console.log('submit!');
                this.getAll();//直接调用查询全部
                // this.formSerach={};
            },
            /*重置按钮的方法*/
            reset(){
                //清空数据模型
                this.formSerach={};
            },
            //批量删除
            batchDelete(){
                if(this.multipleSelection.length == 0){
                    this.$message.error("请选择要删除的数据！！")
                }else{

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //选中的是多个对象  将每个对象的id获取出来
                    for (let i =0; i < this.multipleSelection.length; i++){
                       this.ids[i] = this.multipleSelection[i].id;//去除数组中每个要删除数据的id 1,2,3
                    }
                    //携带ids发送请求
                    axios.post('http://localhost:8080/javaweb17/student/deleteBatch',this.ids).then(resp => {
                        if(resp.data == "success"){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getAll();
                        }else{
                            this.$message.error("数据同步错误");
                        }
                    });



                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                }

            },
            //新增信息按钮弹出按钮
            addInfo(){
                //设置新增的文字
                this.info="新增数据信息";
                //标识新增
                this.ok="add";


                this.dialogFormVisible = true;//显示添加框
                this.student={};

            },
            //弹出框关闭按钮
            out(){
                this.dialogFormVisible=false;//关闭弹窗
                this.student={}//清空数据模型
                this.$message('您取消了操作');


            },
            //弹出框提交按钮
            okDo(){
                //判断ok标识是新增还是修改
                if(this.ok === "add"){
                    //新增
                    this.addDo();
                }else if(this.ok === "update"){
                    //修改
                    this.updateDo();
                }
            },
            //执行新增
            addDo(){
                axios.post("http://localhost:8080/javaweb17/student/add",this.student).then((resp) => {
                    console.log(resp.data)
                    if(resp.data == "success"){
                        //新增成功
                        this.dialogFormVisible=false;//关闭弹框
                        this.$message.success("新增数据成功！！");
                        //重新查询一下全部数据
                        this.getAll();

                    }else{
                        //出现问题
                        this.$message.error("数据同步失败！！");
                    }
                });
            },
            //执行修改
            updateDo(){
                //发送ajax携带表单数据进行修改
                axios({
                    method:'post',
                    url:'http://localhost:8080/javaweb17/student/update',
                    data:this.student
                }).then((resp) => {
                    console.log(resp.data);
                    if(resp.data == "success"){
                        this.dialogFormVisible=false;
                        this.$message.success("修改数据成功！");
                        this.getAll();
                    }else{
                        this.$message.error("数据同步失败！");
                    }
                });

            },

            //设置颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //编辑
            handleEdit(row) {
                console.log(row);
                //设置编辑的文字
                this.info="编辑数据信息";
                //标识修改
                this.ok="update";

                this.dialogFormVisible = true;
                //this.student=row;//也可以去数据库根据id查询以后再显示
                //发送ajax请求去查询相关数据
                axios.get("http://localhost:8080/javaweb17/student/getById?id="+row.id).then(resp => {
                    console.log(resp.data);
                    this.student=resp.data;
                });

            },
            //删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //携带id发送请求进行删除

                    // es6模版字符串
                     //axios.get(`http://localhost:8080/javaweb17/student/remove?id=${row.id}`).then()
                    axios.get("http://localhost:8080/javaweb17/student/remove?id="+row.id).then(resp => {
                        console.log(resp.data)
                        if(resp.data == "success"){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getAll();// 查询全部
                        }else{
                            this.$message.error("数据同步错误！")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*多选按钮触发的事件*/
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            //显示的条数发生改变
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //重新请求分页数据
                this.getAll();
            },
            //当前页发生改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getAll();
            }
        },
        mounted(){//页面挂载完毕
            //发送请求到服务器加载所有数据
            //调用一个函数
            this.getAll();
        }

    });
</script>


